<template>
	<view>
		<map
			id="map"
			style="width: 100%; height: 90vh"
			:style="{ height: height }"
			:scale="scale"
			:latitude="latitude"
			:longitude="longitude"
			:markers="markers"
			@markertap="markertap"
			:joinCluster="true"
		></map>
		<!-- <atl-map :disable="disable" :longitude="longitude" :latitude="latitude" :marker="marker" :mapKey="mapKey" :mapType="mapType"></atl-map> -->
		<view class="" v-show="isShow">
			<Item :item="item" @close="close"></Item>
		</view>
	</view>
</template>

<script>
import Item from './item.vue';

export default {
	components: {
		Item
	},
	data() {
		return {
			disable: false,
			latitude: null, //纬度
			longitude: null, //经度
			scale: 15, // 设置地图的缩放级别
			markers: [
				// 设置标记点
			],
			height: null,
			item: {},
			isShow: false,
			mapKey: '5sxyIQc3gUG9qTM4BtcPTRKOStaFpDwx', //百度地图
			mapType: 'bmap', // tmap bmap amap
			mapContext: null // 地图对象
		};
	},
	onLoad() {
		// #ifdef MP-WEIXIN
		this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(88) * 0 + 'px';
		// #endif
		// #ifndef MP-WEIXIN
		this.height = uni.getSystemInfoSync().windowHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(88) * 0 + 'px';
		// #endif
		this.loadData();
	},
	onShow() {
		if (uni.getStorageSync('marker_info')) {
			this.markers.forEach((items, index) => {
				if (uni.getStorageSync('marker_info').id == items.id) {
					this.item = this.markers[index];
					this.latitude = this.markers[index].lat; //纬度
					this.longitude = this.markers[index].lon; //经度
					this.isShow = true;
				}
			});
		}
	},
	onHide() {
		uni.setStorageSync('marker_info', '');
		this.isShow = false;
	},
	onReady() {
		this.mapContext = uni.createMapContext('map', this);
		this.intervalFn();
	},
	methods: {
		close() {
			this.isShow = false;
		},
		markertap(e) {
			this.markers.forEach((items, index) => {
				if (e.detail.markerId == items.id) {
					let po = this.qqMapTransBMap(this.markers[index].lon, this.markers[index].lat);
					this.item = this.markers[index];
					this.latitude = po.lat; //纬度
					this.longitude = po.lon; //经度
					this.isShow = true;
				}
			});
		},
		/* 获取地图缩放级别-定时判断 */
		intervalFn() {
			setInterval(() => {
				this.mapContext.getScale({
					success: (res) => {
						let _result = [];
						let _obj = {};
						if (this.markers.length > 0) {
							let _result = [];
							this.markers.map((item) => {
								_obj = {
									latitude: item.latitude, //纬度
									longitude: item.longitude, //经度
									iconPath: item.iconPath,
									width: 30, //宽
									height: 30, //高
									title: item.title
								};
								if (res.scale >= 16) {
									// 放大地图显示气泡，缩小地图不显示
									_obj.callout = {
										content: item.title,
										color: '#000', //文字颜色
										fontSize: 16, //文本大小
										borderRadius: 2, //边框圆角
										borderWidth: '8',
										padding: 10,
										bgColor: '#fff', //背景颜色
										display: 'ALWAYS' //常显
									};
								}
								_result.push(_obj);
							});
							this.markers = _result;
						}
					}
				});
			}, 500);
		},
		loadData() {
			this.$http
				.post(
					'hot_crew/index',
					{ exchange_ids: this.$store.state.userInfo.exchange_ids, token: this.$store.state.userInfo.token },
					{
						load: false
					}
				)
				.then((res) => {
					let arr = [];
					res.forEach((item, index) => {
						let po = this.qqMapTransBMap(item.lon, item.lat);
						let params = {
							latitude: po.lat,
							longitude: po.lon,
							title: item.name,
							iconPath: item.status == '0' ? '/static/icon/ic_type_staion.png' : '/static/icon/ic_type_staion_error.png',
							width: 30, //宽
							height: 30 //高
						};
						let obj = { ...item, ...params };
						arr.push(obj);
					});
					const that = this;
					that.$nextTick(() => {
						let po = that.qqMapTransBMap(res[0].lon, res[0].lat);
						that.latitude = po.lat; //纬度
						that.longitude = po.lon; //经度
						that.markers = arr;
						that.item = res[0];
					});
				})
				.catch(() => {});
		},
		qqMapTransBMap(lng, lat) {
			let xPi = (Math.PI * 3000) / 180;
			let x = lng;
			let y = lat;
			let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * xPi);
			let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * xPi);
			let lngs = z * Math.cos(theta) + 0.0065;
			let lats = z * Math.sin(theta) + 0.006;
			return {
				lon: lngs,
				lat: lats
			};
		}
	}
};
</script>

<style>
page {
	background-color: #ededed;
}
.map {
	width: 100%;
	height: 100vh;
}
.container {
	padding: 20px;
	font-size: 14px;
	line-height: 24px;
}
</style>
